<template>
  <div class="search">
    <div class="container">
      <div class="bottomBorder">
        <div class="titleTwo">专题:</div>
        <ul class="toppicListBox">
          <li
            v-for="(item, index) in toppicList"
            :key="index"
            @click="getToppicList(index, item.subjectId)"
            :class="toppicInddex === index ? 'listActive' : ''"
            :id="listTitleIndex == index ? 'addColor' : ''"
          >
            {{ item.subjectTitle }}
          </li>
        </ul>
      </div>
      <div style="clear: both"></div>
      <div class="bottomBorder">
        <div class="titleTwo">类型</div>
        <ul class="toppicListBox">
          <li
            v-for="(item, index) in typeList"
            :key="index"
            @click="getTypeList(index, item.type)"
            :class="typeIndex === index ? 'listActive' : ''"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div style="clear: both"></div>

      <div class="bottomBorder">
        <div class="titleTwo">类型</div>
        <ul class="toppicListBox">
          <li
            v-for="(item, index) in courseType"
            :key="index"
            @click="getMensList(index, item.type)"
            :class="mensIndex === index ? 'listActive' : ''"
          >
            {{ item.title }}
          </li>
        </ul>
      </div>
      <div style="clear: both"></div>
    </div>
    <SearchRanderList
      :renderList="renderList"
      :total="total"
      v-if="renderList != ''"
    ></SearchRanderList>
    <div v-else class="noDataBox">暂无相关搜索结果，换个关键词试试吧 : )</div>
  </div>
</template>

<script>
import { courselistt } from "../../../api/index-api";
import { courseSearch, courseKeywordsSearch } from "../../../api/search-api";
import SearchRanderList from "./SearchRanderList.vue";
import { mapState } from "vuex";
export default {
  name: "Search",
  data() {
    return {
      toppicList: null,
      toppicInddex: 10000,
      typeList: [
        { title: "全部类型", type: "" },
        { title: "免费课程", type: "free" },
        { title: "付费精品", type: "pay" },
        { title: "精品课程", type: "boutique" },
        { title: "限时折扣课程", type: "discount" },
      ],
      courseType: [
        { title: "全部方式", type: "" },
        { title: "直播课程", type: "live" },
        { title: "录播课程", type: "recorded" },
      ],
      typeIndex: 0,
      mensIndex: 0,
      renderList: null,
      total: null,
      topicListId: "",
      listType: "",
      listMens: "",
      listTitleIndex: null,
    };
  },
  methods: {
    getToppicList(data, id) {
      this.toppicInddex = data;
      this.topicListId = `&subjectId=${id}`;
      courseSearch(this.listType, this.topicListId, this.listMens).then(
        (res) => {
          this.renderList = res.courseList;
          console.log(res.courseList);
          this.total = res.total;
        }
      );
      this.listTitleIndex = 1000;
    },
    // 第二行
    getTypeList(data, type) {
      this.typeIndex = data;
      this.listType = `&type=${type}`;
      courseSearch(this.listType, this.topicListId, this.listMens).then(
        (res) => {
          this.renderList = res.courseList;
          this.total = res.total;
        }
      );
    },
    // 第三行
    getMensList(data, type) {
      this.mensIndex = data;
      this.listMens = `&courseType=${type}`;
      courseSearch(this.listType, this.topicListId, this.listMens).then(
        (res) => {
          this.renderList = res.courseList;
          this.total = res.total;
        }
      );
    },
  },
  computed: {
    ...mapState(["vuexTopicListId", "vuexKeyWord"]),
  },
  created() {
    //   获取专题列表
    courselistt().then((res) => {
      this.toppicList = res.rows;
      res.rows.forEach((item, index) => {
        if (item.subjectId == this.vuexTopicListId) {
          this.listTitleIndex = index;
        }
      });
    });
    // 点击专题列表切换
    courseSearch("", "&subjectId=" + this.vuexTopicListId).then((res) => {
      this.renderList = res.courseList;
    });
    // 搜索请求接口
    courseKeywordsSearch(this.vuexKeyWord).then((res) => {
      this.renderList = res.courseList;
    });
  },
  components: {
    SearchRanderList,
  },

  watch: {
    // 监听vuex中的id 如果变化刷新数据
    vuexTopicListId() {
      courseSearch("", "&subjectId=" + this.vuexTopicListId).then((res) => {
        this.renderList = res.courseList;
      });
    },
    // 监听vuex中的关键字 如果变化刷新数据
    vuexKeyWord() {
      courseKeywordsSearch(this.vuexKeyWord).then((res) => {
        this.renderList = res.courseList;
      });
    },
  },
  mounted() {},
};
</script>

<style lang="less" scoped>
.container {
  width: 1200px;
  margin: auto;
  background: #f4f4f4;
  .titleTwo {
    float: left;
    margin: 7px 5px;
    height: 30px;
    line-height: 30px;
    margin-top: 15px;
  }
  .toppicListBox {
    padding: 10px;
    float: left;
    width: 93%;

    li {
      float: left;
      margin: 5px;
      padding: 2px;
      min-width: 70px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
  }
  .listActive {
    color: #fff;
    background: #00cf8c;
  }

  .bottomBorder {
    overflow: auto;
    border-bottom: 3px solid white;
  }
  #addColor {
    background-color: #00cf8c;
    color: white;
  }
}
.noDataBox {
  width: 1200px;
  margin: auto;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  min-height: 167px;
}
</style>